<template>
  <div class="collect">
    <div class="collect_heard">
      <span>内容类型：</span>
      <ul class="secul">
        <li :class="type == 0 ? 'clickedNav' : ''" @click="typeClick(0)">
          文章
        </li>
        <li :class="type == 1 ? 'clickedNav' : ''" @click="typeClick(1)">
          视频
        </li>
      </ul>
      <div class="collect_sec">
        <el-input
          placeholder="请输入内容"
          v-model="secMain"
          prefix-icon="el-icon-search"
          clearable
          @change="getIssueList"
        ></el-input
        ><el-button icon="el-icon-search" type="primary" @click="getIssueList">搜索</el-button>
      </div>
    </div>
    <div class="mainList">
      <ul v-if="type == 0" class="article clear">
        <Card v-for="ifem in dataList" :key="ifem.id" :liData="ifem" />
      </ul>
      <ul v-if="type == 1" class="video clear">
        <VideoCard v-for="ifem in dataList" :key="ifem.id" :liData="ifem" />
      </ul>
      <el-empty :image-size="240" v-if="dataList.length == 0"></el-empty>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Card from "../components/Card.vue";
import VideoCard from "../components/VideoCard.vue";
export default {
  data() {
    return {
      dataList: [],
      type: 0,
      secMain: "",
    };
  },
  components: { Card, VideoCard },
  created() {
      this.getIssueList()
  },
  methods: {
      
    getIssueList() {
      var userId = this.$route.query.userId;
      axios
        .post(`http://localhost:3000/getIssueList`, {
          userId,
          type:this.type,
          secMain:this.secMain
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.dataList = ret.data.Issue;
          }else{
              this.dataList ={}
          }
        });
    },
    typeClick(num) {
      this.type = num;
      this.dataList=[]
      this.getIssueList()
    },
  },
};
</script>

<style scoped>
.collect {
  padding: 20px;
  border-top: 2px solid #dcdfe6;
}
.collect_heard,
.collect_sec,
.secul {
  display: flex;
}
.collect_heard span {
  font-size: 16px;
  line-height: 40px;
}
.collect_sec {
  padding-left: 20px;
  width: 50%;
}
.secul > li {
  font-size: 14px;
  line-height: 30px;
  padding: 5px 20px;
  margin: 0 10px;
  cursor: pointer;
  transition: 00.3s;
  border-radius: 5px;
}
.mainList{
    margin: 20px 0;
    min-height: 700px;
}
.mainList > ul.article {
  width: 100%;
}
.mainList > ul.article > li {
  float: left;
  margin: 0 30px 30px 30px;
}
.mainList > ul.video > li {
  float: left;
  margin: 20px 40px 20px 0;
}
.mainList > ul.video > li:nth-of-type(4n) {
  margin-right: 0;
}
</style>
